<template>
  <div class="w-full h-full" style="background: #fff">
    <Nav class="fixed top-0 w-full z-10" />
    <div class="OrgWarehouse">
      <van-form class="mt-20">
        <van-cell-group inset>
          <van-field
            v-model="formData.orgId"
            class="rounded-full my-10"
            :label="translateTitle('Base.apps.组织')"
            label-align="center"
            :name="translateTitle('Base.login.用户名')"
            :placeholder="translateTitle('Base.apps.请选择组织')"
            readonly
            @click="clickBtn('orgId')"
            @keydown="confirm($event, 'refUser')"
          />
          <van-field
            v-model="formData.wh"
            class="rounded-full my-10"
            :label="translateTitle('Base.apps.仓库')"
            label-align="center"
            :name="translateTitle('Base.login.用户名')"
            :placeholder="translateTitle('Base.apps.请选择仓库')"
            readonly
            @click="clickBtn('wh')"
            @keydown="confirm($event, 'refUser')"
          />
        </van-cell-group>
      </van-form>
      <van-button block round style="background: #152777" type="primary" @click="submit">{{ translateTitle('Base.apps.确认') }}</van-button>
      <Select :columns="columns" :show-picker="Picker" @close="close" />
    </div>
  </div>
</template>

<script>
  import { defineComponent, toRefs, reactive, onMounted, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'

  import { getSelectResource } from '@commonProject/api/user'
  import Nav from '../components/nav'
  import Select from '../components/Select'
  import isEmpty from 'lodash/isEmpty'
  import { wmsPost } from '../api/api.js'

  import { translateTitle } from '@/utils/i18n'

  import { Field, Form, CellGroup, button } from 'vant'
  export default defineComponent({
    name: 'OrgWarehouse',
    components: { Nav, Select, [Form.name]: Form, [CellGroup.name]: CellGroup, [Field.name]: Field, [button.name]: button },
    setup() {
      const store = useStore()
      let OrgWarehouse = reactive({
        formData: {
          orgId: '',
          orgIdCODE: '',
          wh: '',
          whCODE: '',
        },
        columns: [],
        orgIdColumns: [], //组织下拉选
        whColumns: [], //仓库下拉选
        Picker: false,
        choiceOrg: {}, //选中得org
        clickInput: '', //当前点击得输入框
      })
      store.dispatch('pdaNav/setnavData', { title: translateTitle('Base.apps.设置'), notMenu: true, outLogin: true })

      const router = useRouter()

      // 确认或者取消下拉选
      function close(flage, value) {
        // value为空的话证明是取消按钮。直接关闭下拉选即可
        if (isEmpty(value)) {
          OrgWarehouse.Picker = flage
          return
        }
        // 否则是确定按钮，需要设置数据处理
        if (OrgWarehouse.clickInput == 'orgId') {
          OrgWarehouse.choiceOrg = value
          OrgWarehouse.formData.orgId = value.name
          OrgWarehouse.formData.orgIdCODE = value.key
          getWHFuc()
        } else if (OrgWarehouse.clickInput == 'wh') {
          OrgWarehouse.formData.wh = value.name
          OrgWarehouse.formData.whCODE = value.key
        }
        OrgWarehouse.Picker = flage
      }
      let apps = computed(() => store.getters['user/apps'])
      let appCode = store.getters['user/appCode']
      let orgIdColumns = []
      const _getSelectResource = async (item = {}) => {
        getSelectResource({
          '#LIMIT#': 1,
          '#PAGE_SIZE#': 9999,
          APP_CODE: appCode,
          ...item,
        }).then((res) => {
          orgIdColumns = res.data[0].APP_SELECTS_VALUE
          init()
        })
      }
      onMounted(() => {
        _getSelectResource()
        store.dispatch('user/setAppCode', appCode)
        let appInfo = apps.value.find((v) => v.APP_CODE === appCode)
        store.dispatch('user/setAppId', appInfo.ID)
      })

      const init = () => {
        let arr = []
        for (let obj of orgIdColumns) {
          arr.push({
            key: obj.ORG_ID,
            name: obj.NAME,
          })
        }
        // 设置组织id下拉选
        OrgWarehouse.orgIdColumns = arr
        // 设置组织id下拉选的初始值
        OrgWarehouse.formData.orgId = arr[0].name
        OrgWarehouse.formData.orgIdCODE = arr[0].key
        OrgWarehouse.choiceOrg = arr[0]
        getWHFuc()
      }
      // 点击下拉选
      function clickBtn(key) {
        OrgWarehouse.clickInput = key
        if (key == 'orgId') {
          init()
          // 给组织id设置下拉选内容
          OrgWarehouse.columns = OrgWarehouse.orgIdColumns
          OrgWarehouse.Picker = true
        } else if (key == 'wh') {
          if (isEmpty(OrgWarehouse.formData.orgId)) {
            window.$CIMC.playMusic('ERROR', translateTitle('Base.apps.请选择组织'))
            return
          }
          // 给仓库设置下拉选内容
          OrgWarehouse.columns = OrgWarehouse.whColumns
          OrgWarehouse.Picker = true
        }
      }
      //语言ID
      // let LANGUAGE_CODE = store.getters['user/language']
      // 获取仓库接口
      function getWHFuc() {
        let method = 'wms.warehouse.queryByorgIdAndUserId'
        wmsPost(
          {
            ORG_ID: OrgWarehouse.choiceOrg.key,
            '#LIMIT#': 1,
            '#PAGE_SIZE#': 100,
          },
          method
        )
          .then((res) => {
            let arr = []
            for (let obj of res.data[method].data) {
              arr.push({
                key: obj.WAREHOUSE_ID,
                name: obj.DESCRC,
              })
              OrgWarehouse.whColumns = arr
              OrgWarehouse.formData.wh = arr[0].name
              OrgWarehouse.formData.whCODE = arr[0].key
            }
          })
          .catch((err) => {
            window.$CIMC.playMusic('ERROR', err.msg)
          })
      }
      function submit() {
        if (isEmpty(OrgWarehouse.formData.orgId)) {
          window.$CIMC.playMusic('ERROR', translateTitle('Base.apps.请选择组织'))
          return
        } else if (isEmpty(OrgWarehouse.formData.wh)) {
          window.$CIMC.playMusic('ERROR', translateTitle('Base.apps.请选择仓库'))
          return
        }
        // userStore.setWarehouse({
        //   key: OrgWarehouse.formData.whCODE,
        //   name: OrgWarehouse.formData.wh,
        // })

        //往VueX里加组织和仓库的传参
        let orgAndWh = store.getters['user/businessCode']
        //组织
        orgAndWh.ORG_ID = OrgWarehouse.formData.orgIdCODE
        //仓库
        orgAndWh.WAREHOUSE_ID = OrgWarehouse.formData.whCODE
        //放入对象
        store.dispatch('user/setbusinessCode', orgAndWh)
        setTimeout(() => {
          router.push('/menu')
        })
      }

      return {
        ...toRefs(OrgWarehouse),
        close,
        clickBtn,
        getWHFuc,
        submit,
        translateTitle,
      }
    },
  })
</script>
<style lang="scss" scoped>
  html,
  body {
    height: 100%;
  }
  // .w-full {
  //   background: #fff !important;
  // }
  .OrgWarehouse {
    .van-cell {
      background: #f5f3f3;
      padding: 0.3rem 1rem !important;
    }
    .van-field__control {
      text-indent: 10px !important;
      padding: 0.1rem 0rem !important;
    }
    .van-badge__wrapper {
      color: var(--btn-comfirm-back) !important;
      font-size: 1rem !important;
    }

    .bottom {
      width: calc(100% - 2rem) !important;
    }
    .van-button--primary {
      border-radius: 5rem !important;
      height: 3rem !important;
      background: rgb(21, 39, 119) !important;
    }
    .van-cell__title > label {
      font-size: 1rem !important;
      width: 100% !important;
    }
    .van-field__error-message {
      font-size: 10px !important;
    }
    .van-cell__title > label {
      font-size: 14px !important;
      width: 100% !important;
    }

    .van-cell-group {
      margin: var(--van-cell-group-inset-padding) !important;
    }
    .van-cell-group {
      background: none !important;
    }
  }
</style>
